<template>
  <div class="games">
    <!-- 游戏库的二级导航 -->
    <van-tabs
      v-model:active="active"
      line-width="0px"
      line-height="0px"
      title-active-color="#47C1C8"
    >
      <van-tab title="本机" to="/home/mygame/games/local" class="benji">
        <template #title
          ><!-- 图片 -->
          <van-image
            width="17"
            height="17"
            :src="require('../../../../public/img/我的游戏/mygame2.png')"
            class="benjiimg"
          />本机</template
        >
        <!-- 下拉菜单 -->
        <div class="sort">
          <!-- 菜单 -->
          <van-dropdown-menu active-color="#14b8c7">
            <van-dropdown-item
              v-model="state.value1"
              :options="option1"
              teleport="body"
            />
          </van-dropdown-menu>
          <!-- 右边 -->
          <div class="s_right">
            <van-image
              width="13"
              height="13"
              :src="require('../../../../public/img/我的游戏/mygame5.png')"
            />共有<span>{{ change }}</span
            >个小时
          </div>
        </div>
      </van-tab>
      <van-tab title="更新" to="/home/mygame/games/update"
        ><template #title
          ><!-- 图片 -->
          <van-image
            width="17"
            height="17"
            :src="require('../../../../public/img/我的游戏/mygame3.png')"
            class="benjiimg"
          />更新</template
        ></van-tab
      >
      <van-tab title="玩过" to="/home/mygame/games/played">
        <template #title
          ><!-- 图片 -->
          <van-image
            width="17"
            height="17"
            :src="require('../../../../public/img/我的游戏/mygame4.png')"
            class="benjiimg"
          />玩过</template
        ></van-tab
      >
    </van-tabs>
    <router-view></router-view>
  </div>
</template>

<script>
import { ref, reactive, computed } from "vue";
import { useStore } from "vuex";
export default {
  setup() {
    const active = ref(0);
    const store = useStore();
    const change = computed(() => {
      return store.state.hours;
    });

    // 下拉菜单(1.0)
    const paixvcontent = ref("默认排序");
    const paixv = (e) => {
      var el = e.currentTarget;
      paixvcontent.value = el.innerHTML;
    };
    // 菜单(1.1)
    const state = reactive({
      value1: 0,
      value2: "a",
    });
    const option1 = [
      { text: "默认排序", value: 0 },
      { text: "游戏时长", value: 1 },
    ];
    return { active, paixvcontent, paixv, state, option1, change };
  },
};
</script>

<style lang="less">
.games {
  position: relative;
  .van-tabs {
    .van-tabs__nav {
      width: 100% !important;
    }
    .van-tab__text {
      position: relative;
      display: inline-block;
      width: 100%;
      text-align: center;
      .benjiimg {
        position: absolute;
        top: 0px;
        left: 24px;
      }
    }
  }
  .van-tab__text {
    font-size: 16px;
  }
  // .benji {
  //   .benjiimg {
  //     position: absolute;
  //     top: 15.5px;
  //     left: 28px;
  //   }
  // }
  // 菜单(1.1)
  .sort {
    position: relative;
    .van-dropdown-menu__item {
      padding-left: 15px;
      flex: none;
    }
    .s_right {
      z-index: 20;
      position: absolute;
      top: 12px;
      right: 15px;
      font-size: 14px;
      width: 100px;
      height: 28px;
      color: #b5b5b5;
      background: #f1f1f1;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 5px;
    }
  }
}
</style>
